<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../../css/detail_common.css">
	<style media="screen">
		/*图片预览*/

		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}

		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}

		.mui-preview-header {
			height: 44px;
			top: 0;
		}

		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}

		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}

		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}

		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}

		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}

		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}

		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}

		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}

		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}

		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}

		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}

		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}

		.mui-preview-loading.mui-active {
			display: block;
		}

		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}

		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}

		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}

		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}

		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		p img {
			max-width: 100%;
			height: auto;
		}
		/*图片预览*/
		/*原生css重写*/

		.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
			width: inherit;
			height: inherit;
			background-color: #f2f6f9;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			height: inherit;
			line-height: 50px;
		}

		.mui-segmented-control.mui-scroll-wrapper {
			height: 50px;
		}

		.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			width: 33%;
		}

		.mui-control-content {
			height: inherit;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #498af7;
		}

		.mui-segmented-control .mui-control-item.mui-active,
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			background-color: #498af7;
		}

		.mui-segmented-control .mui-control-item {
			border-color: #498af7;
			color: #498af7;
			font-weight: 200;
		}

		.mui-scroll-wrapper {
			background-color: #ffffff;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			color: #666666;
			font-weight: 400;
		}

		.mui-control-content {
			background-color: white;
			min-height: 210px;
		}

		.mui-control-content .mui-loading {
			margin-top: 50px;
		}

		.flex-cell-cloumn {
			display: flex;
			flex-direction: column;
		}

		.flex-cell-row {
			display: flex;
			flex-direction: row;
		}

		.my-cell-info {
			margin-left: 10px;
		}

		.my-block-btn {
			width: 90%;
			margin: 20px auto;
			padding: 10px 0;
			font-weight: 100;
			border-radius: 5px;
		}

		.mui-btn-primary {
			background-color: #498af7;
		}

		.cell-i {
			margin: 3px 0;
		}
		/*.mui-slider .mui-slider-group .mui-slider-item img {
			width: 37px;

			height: 37px;

			border-radius: 50%;
		}*/
		.mui-table-view-cell {
			list-style: none;
		}
	
	 .my-cell-paragraph {
		 font-size: 15px;
		 color: #333333;
		 margin-top: 10px;
		 white-space: normal;
		 line-height: 24px;
	 }
	 .ic-head-img img{
		 width: 37px;
		 height: 37px;
		 border-radius: 50%;
		 background-size: 100% 100%;
	 }
	 .my-cell-cloumn02 {
		display: flex;
    	flex-direction: column;
		flex-grow: 1;
	 }
	 .my-sm-img {
		width: 33%;
        height: 80px;
        background-size: 100% 100%;
        background-color: #fff;
        background-position: 0 0;
	 }
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav my-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">B超机</h1>
	</header>
	<div class="mui-content">

		<div class="info-main" id="info-name">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="fault-userInfo-item flex-cell-cloumn text-darkGrey">
						<div class="cell-i">医院: </div>
						<div class="cell-i">科室: </div>
						<div class="cell-i">负责人:  <i class="text-phone"></i></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="flex-cell-row cell-between text-darkGrey">
						<div>故障类型</div>
						<!-- <div>无法开机</div> -->
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="flex-cell-cloumn cell-between text-darkGrey">
						<div>故障描述</div>
						<div class="my-cell-paragraph"></div>
					</div>
				</li>
				<li class="mui-table-view-cell text-darkGrey">
					<div class="fault-img">
						<div class="">故障图片</div>

						<!-- <div class="flex-cell-row img-wrapper">
							<img data-preview-src="" data-preview-group="1" src="../../images/dhImages/shuijiao.jpg" alt="">
							<img data-preview-src="" data-preview-group="1" src="../../images/dhImages/yuantiao.jpg" alt="">
							<img data-preview-src="" data-preview-group="1" src="../../images/dhImages/muwu.jpg" alt="">
							<img data-preview-src="" data-preview-group="1" src="../../images/dhImages/muwu.jpg" alt="">
						</div>
					</div> -->
				</li>
			</ul>
		</div>

		<div class="tab-main">
			<div class="mui-slider" id="slider">
				<!-- 下方导航栏 -->
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
									管理记录
							</a>
						<a class="mui-control-item" href="#item2mobile">
									故障记录
							</a>
						<a class="mui-control-item" href="#item3mobile">
									工单记录
							</a>
					</div>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">

									<!-- <li class="mui-table-view-cell">
										<div class="fault-cell flex-cell-row">
											<div class="my-cell-title"><span class="circle-name">李</span></div>
											<div class="my-cell-cloumn02 my-cell-info ">
												<div class="my-cell-name my-cell-row">
													<span>李医生</span>
													<span class="text-grey">03/08 13:47:28</span>
												</div>
												<div class="text-grey content-title">新增设备</div>
											</div>
										</div>
									</li> -->

								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner"></div>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 按钮组 -->
		<div class="btn-buttom">
			<a href="#" class="my-block-btn mui-btn mui-btn-primary mui-btn-block">故障确认</a>
			<a href="#" class="my-block-btn mui-btn mui-btn-default mui-btn-block" style="color:#498af7;border-color:#498af7;">故障误报</a>
		</div>
	</div>

	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.zoom.js"></script>
	<script src="../../js/mui.previewimage.js"></script>
	<script src="../../js/md5.min.js" charset="utf-8"></script>
    <script src="../../js/imgload.js" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: false
		});

		mui.previewImage(); // 图片单击预览

		(function($) {
			$('.mui-scroll-wrapper').scroll({
				indicators: true //是否显示滚动条
			});

			var deceleration = mui.os.ios ? 0.003 : 0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: deceleration
			});

			var infoMain = document.getElementById("info-name");
			mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultInfoById&hospitalid=10&departmentid=11&uid=3&token=dfaf&fid="+Request("id"), {
				dataType: 'json',
				type: 'get',
				success: function (data) {
					var faultDetail = data.data;
					console.log(faultDetail);
					// 详情图片集合
					var picSet = faultDetail.pics;
					var imgHTML = '';
					for (var i = 0; i < picSet.length; i++) {
						imgHTML += "<div class=\"slide-item\"><a><img class=\"my-sm-img\" data-preview-src=\"http://app.xiaoweicanting.com/"+picSet[i]+"\" data-preview-group=\"1\" style=\"height: 100%; width: 100%;\" src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + picSet[i] + " \" alt=\"\" onload=\"load(this)\"></a></div>"
						
					}
					imgHTML = "<div  class=\"slide-box\">" + imgHTML + "</div>";
					var ul = infoMain.querySelector(".mui-table-view");
					ul.innerHTML =  "<li class=\"mui-table-view-cell\"><div class=\"fault-userInfo-item flex-cell-cloumn text-darkGrey\"><div class=\"cell-i\">医院: "+faultDetail.hospitalname+"</div><div class=\"cell-i\">科室: "+faultDetail.departmentname+"</div><div class=\"cell-i\">负责人: "+faultDetail.addname+ "  " +faultDetail.addurole+ " <i class=\"text-phone\">"+faultDetail.addutel+"</i></div></div></li><li class=\"mui-table-view-cell\"><div class=\"flex-cell-row cell-between text-darkGrey\"><div>故障类型</div><div>" + faultDetail.reason+ "</div></div></li><li class=\"mui-table-view-cell\"><div class=\"flex-cell-cloumn cell-between text-darkGrey\"><div>故障描述</div><div class=\"my-cell-paragraph\">"+faultDetail.content+"</div></div></li><li class=\"my-mui-table-view-cell text-darkGrey\"><div class=\"fault-img\"><div class=\"\">故障图片</div><div class=\"flex-cell-row img-wrapper\">"+imgHTML+"</div></div></li>"

				},
				error: function (error) {
					mui.toast('网络加载错误', {
						duration: 'short',
						type: 'div'
					});
				}
			});


			var html2 = "<h1>item2</h1>"
			var html3 = "<h1>item3</h1>"
			var item1 = document.getElementById('item1mobile');
			var item2 = document.getElementById('item2mobile');
			var item3 = document.getElementById('item3mobile');

			// 管理记录加载
			mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getManageListOfEquipment&hospitalid=10&departmentid=11&uid=3&token=dfaf&limit=10", {
				dataType: 'json',
				type: 'get',
				success: function (data) {
					var managementRecord = data.data;
					console.log(managementRecord);

					var i_HTML = '';
					for (var i = 0;i < managementRecord.length;i++) {
						//  用户头像为空时，自动设置为汉字第一个，英文取首字母大写
						var myCell = managementRecord[i].adduname.split("");
						var myCellNode = myCell.slice(0,1);
						if (isChinese(managementRecord[i].adduname)) {
							myCellNode = myCell[0];
						} else {
							myCellNode = myCell[0].toUpperCase();
						}
						var addduimg = "";
						if (managementRecord[i].adduhead.length == 0) {
							adduimg = "<div class=\"my-cell-title\"> <span class=\"circle-name\">" + myCellNode + "</span></div>"
						} else {
							adduimg = "<div class=\"ic-head-img\"><img src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + managementRecord[i].adduhead + "\"  style=\"width: 37px;height: 37px;border-radius: 50%;\" onload=\"load(this)\"/></div>"
						}
						i_HTML += "<li class=\"mui-table-view-cell\"><div class=\"fault-cell flex-cell-row\">"+adduimg+"<div class=\"my-cell-cloumn02 my-cell-info \"><div class=\"my-cell-name my-cell-row\"><span>"+managementRecord[i].adduname+"</span><span class=\"text-grey\">"+managementRecord[i].addtime+"</span></div><div class=\"text-grey content-title\">"+managementRecord[i].actiondesc+"</div></div></div></li>"
					}
					item1.querySelector('.mui-scroll').innerHTML  =  i_HTML;
				},
				error: function (error) {
					mui.toast('网络加载错误', {
						duration: 'short',
						type: 'div'
					});
				}
			});

			document.getElementById('slider').addEventListener('slide', function(e) {
				// 故障记录
				if (e.detail.slideNumber === 1) {
					if (item2.querySelector('.mui-loading')) {
						setTimeout(function() {
							mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getFaultListOfEquipment&hospitalid=10&departmentid=11&uid=3&token=dfaf&limit=10", {
								dataType: 'json',
								type: 'get',
								success: function (data) {
									var faultRecord = data.data;
									console.log(faultRecord);

									var i_HTML = '';
									for (var i = 0;i < faultRecord.length;i++) {
										//  用户头像为空时，自动设置为汉字第一个，英文取首字母大写
										var myCell = faultRecord[i].adduname.split("");
										var myCellNode = myCell.slice(0,1);
										if (isChinese(faultRecord[i].adduname)) {
											myCellNode = myCell[0];
										} else {
											myCellNode = myCell[0].toUpperCase();
										}
										var addduimg = "";
										if (faultRecord[i].adduhead.length == 0) {
											adduimg = "<div class=\"my-cell-title\"> <span class=\"circle-name\">" + myCellNode + "</span></div>"
										} else {
											adduimg = "<div class=\"ic-head-img\"><img src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + faultRecord[i].adduhead + "\" style=\"width: 37px;height: 37px;border-radius: 50%;\"  onload=\"load(this)\" /></div>"
										}
										i_HTML += "<li class=\"mui-table-view-cell\"><div class=\"fault-cell flex-cell-row\">"+adduimg+"<div class=\"my-cell-cloumn02 my-cell-info \"><div class=\"my-cell-name my-cell-row\"><span>"+faultRecord[i].name+"</span><span class=\"text-grey\">"+faultRecord[i].addtime+"</span></div><div class=\"text-grey content-title\">"+faultRecord[i].faultdesc+" "+faultRecord[i].faultstatedesc+"</div></div></div></li>"
									}
									item2.querySelector('.mui-scroll').innerHTML  =  i_HTML;
								},
								error: function (error) {
									mui.toast('网络加载错误', {
										duration: 'short',
										type: 'div'
									});
								}
							});

						}, 500);
					}
					// 工单记录
				} else if (e.detail.slideNumber === 2) {
					if (item3.querySelector('.mui-loading')) {
						setTimeout(function() {
							mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=fault&a=getOrderListOfEquipment&hospitalid=10&departmentid=11&uid=3&token=dfaf&limit=10", {
								dataType: 'json',
								type: 'get',
								success: function (data) {
									var orderRecord = data.data;
									console.log(orderRecord);

									var i_HTML = '';
									for (var i = 0;i < orderRecord.length;i++) {
										//  用户头像为空时，自动设置为汉字第一个，英文取首字母大写
										var myCell = orderRecord[i].adduname.split("");
										var myCellNode = myCell.slice(0,1);
										if (isChinese(orderRecord[i].adduname)) {
											myCellNode = myCell[0];
										} else {
											myCellNode = myCell[0].toUpperCase();
										}
										var addduimg = "";
										if (orderRecord[i].adduhead.length == 0) {
											adduimg = "<div class=\"my-cell-title\"> <span class=\"circle-name\">" + myCellNode + "</span></div>"
										} else {
											adduimg = "<div class=\"ic-head-img\"><img src=\"../../images/test/timg.jpeg\" data-src=\"http://app.xiaoweicanting.com/" + orderRecord[i].workderhead + "\" style=\"width: 37px;height: 37px;border-radius: 50%;\" onload=\"load(this)\" /></div>"
										}
										i_HTML += "<li class=\"mui-table-view-cell\"><div class=\"fault-cell flex-cell-row\">"+adduimg+"<div class=\"my-cell-cloumn02 my-cell-info \"><div class=\"my-cell-name my-cell-row\"><span>"+orderRecord[i].workdername+"</span><span class=\"text-grey\">"+orderRecord[i].addtime+"</span></div><div class=\"text-grey content-title\">"+orderRecord[i].name+orderRecord[i].orderdesc+" "+orderRecord[i].orderstatedesc+"</div></div></div></li>"
									}
									item3.querySelector('.mui-scroll').innerHTML  =  i_HTML;
								},
								error: function (error) {
									mui.toast('网络加载错误', {
										duration: 'short',
										type: 'div'
									});
								}
							});
						}, 500);
					}
				}
			});
			var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
					//force repaint
					sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
				}
			});
		})(mui);
		// url参数检索
		function Request(name) {
			new RegExp("(^|&)" + name + "=([^&]*)").exec(window.location.search.substr(1));
			return RegExp.$2
		}
		function isChinese(text) {
			var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
			if (reg.test(text)) {
				return true;
			} else {
				return false;
			}
		}
	</script>
</body>

</html>
